<template>
  <cloudPage :headerIndex="9900" :isLoading="loading['otc.loadCoin']">
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:#fff;">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#000;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#000;"
        >
          {{ $t("common.title.otc") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons" style="font-size:38rpx;"></view>
      </view>
    </cloudHeader>
    <view class="gbody main" v-if="!loading['otc.loadCoin']">
      <view class="header">
        <view class="side">
          <view class="navbar">
            <view
              class="nav-item"
              :class="{ current: sideIndex === 0 }"
              @click="sideTabClick('BUY', 0)"
            >
              {{ $t("otc.index.i_buy") }}
            </view>
            <view
              class="nav-item"
              :class="{ current: sideIndex === 1 }"
              @click="sideTabClick('SELL', 1)"
              >
              {{$t('otc.index.i_sell')}}
            </view>
          </view>
          <view class="menu grace-flex grace-flex-vcenter">
            <!-- <image src="../../static/icon-filter.png" @click="filter"></image> -->
            <navigator
              url="/pages/otc/merchant/list"
              hover-class="none"
              style="display:inline-block"
            >
              <cloudIcon
                name="iconrenwu-ren"
                style="color:#0d0d0d;font-size:38rpx;"
                class="mr-30"
              ></cloudIcon>
            </navigator>
            <navigator
              url="/pages/otc/merchant/release"
              hover-class="none"
              style="display:inline-block"
            >
              <cloudIcon
                type="grace"
                name="icon-write"
                style="color:#0d0d0d;font-size:34rpx;"
                class="mr-20"
              ></cloudIcon>
            </navigator>
            <image
              src="@/static/otc/icon-order.png"
              style="width:36rpx;height:36rpx;"
              @tap.stop="handleNavTo({ url: '/pages/otc/order/index' })"
            ></image>
          </view>
        </view>
        <view class="coinNavbar">
          <view
            v-for="(item, index) in coin"
            :key="index"
            class="nav-item"
            :class="{ current: coinIndex === index }"
            @click="coinTabClick(index)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <mescroll-body
        ref="mescrollRef"
        @init="mescrollInit"
        top="180"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
        :up="upOption"
      >
        <!-- 分页的数据列表 -->
        <view v-for="item in exchange.data" :key="item.id">
          <otc-list-item :data.sync="item"></otc-list-item>
        </view>
      </mescroll-body>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import otcListItem from "./components/otc-list-item.vue";
export default {
  components: {
    otcListItem
  },
  data() {
    return {
      sideIndex: 0,
      coinIndex: 0,
      downOption: {
        auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        empty: {
          tip: "~ 空空如也 ~"
        }
      },
      page: {
        page: 1, // 页码
        limit: 10, // 页数
        type: 1, // 1是卖  2是买，
        coin: null // 币种
      }
    };
  },
  computed: {
    ...mapGetters("otc", ["coin", "exchange"])
  },
  onLoad() {
    this.loadCoin().then(res => {
      this.page.coin = res[0].coin;
      setTimeout(() => {
        this.mescroll.resetUpScroll();
      }, 300);
    });
  },
  methods: {
    ...mapActions("otc", ["loadCoin", "loadExchange"]),
    // 顶部tab点击
    sideTabClick(side, index) {
      this.sideIndex = index;
      this.page.type = index == 0 ? 1 : 2;
      this.mescroll.resetUpScroll();
    },
    // 币种点击
    coinTabClick(index) {
      this.coinIndex = index;
      this.page.coin = this.coin[index].coin;
      this.mescroll.resetUpScroll();
    },
    /*下拉刷新的回调 */
    downCallback() {
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      let $this = this;
      this.page.page = page.num;
      this.page.limit = page.size;
      this.loadExchange({
        page: this.page.page,
        type: this.page.type,
        coin: this.page.coin,
        limit: this.page.limit
      })
        .then(res => {
          $this.mescroll.endByPage(res.data.length, res.last_page);
        })
        .catch(error => {
          $this.mescroll.endErr();
        });
    }
  }
};
</script>

<style scoped>
.main {
  background: #fff;
}
.little-line {
  position: relative;
}
.little-line:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
  transform: scaleY(0.5);
}
image {
  width: 100%;
  vertical-align: bottom;
  will-change: transform;
}
.header {
  z-index: 1;
  position: fixed;
  left: 0;
  background: #ffffff;
  width: 100%;
}
.navbar {
  display: flex;
  height: 40px;
  background: #fff;
  position: relative;
  margin: 0 30rpx 0rpx 30rpx;
  padding-bottom: 30rpx;
}
.navbar .nav-item {
  height: 100%;
  font-size: 30rpx;
  color: #8b9faa;
  margin-right: 15px;
  display: flex;
  align-items: flex-end;
}
.navbar .current {
  color: #14191f;
  font-size: 40rpx;
  font-weight: bold;
}
.side {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.side .menu image {
  width: 20px;
  height: 20px;
  margin: 0rpx 30rpx 0rpx 10rpx;
}

.coinNavbar {
  display: flex;
  height: 50rpx;
  padding-top: 20rpx;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.coinNavbar .nav-item {
  height: 100%;
  font-size: 15px;
  color: #14191f;
  margin-right: 15px;
  position: relative;
}
.coinNavbar .current {
  color: #0952c3;
}
.coinNavbar .current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 0;
  border-bottom: 2px solid #0952c3;
}
</style>
